import { defineComponent } from 'vue'

import {
  ElButton,
  ElCol,
  ElRow,
} from 'element-plus'

import { useRouter } from 'vue-router'
import usePageTable from '@/hooks/usePageTable'
import { getApplications } from '@/api/scholarship'
import type { Scholarship } from '@/types/scholarship'
import DictTag from '@/components/DictTag/index.vue'
import { applicationStatus } from '@/utils/staticDict'

export default defineComponent({
  setup() {
    const router = useRouter()
    const handleAdd = () => router.push('/scholarship/detail')

    const handleView = (row: Scholarship) => router.push({
      path: '/scholarship/detail',
      query: {
        applicationId: row.applicationId,
      },
    })

    /** 列表逻辑 */
    const {
      QueryForm,
      Table,
      handleSearch,
    } = usePageTable<Scholarship>(
      {
        getList: getApplications,
        fields: [],
        initValues: {
          pageSize: 10,
          pageNum: 1,
        },
      },
      [
        {
          key: 'applicationDate',
          title: '申请学年',
        },
        {
          key: 'applicationAwardType',
          title: '奖学金类型',
        },
        {
          key: 'createTime',
          title: '申请时间',
        },
        {
          key: 'status',
          title: '申请状态',
          render: row => <DictTag value={row.applicationStatus} options={applicationStatus} type="tag" showValue={true} />,
        },
        {
          key: 'operate',
          title: '操作',
          render: row => (
            <>
              <ElButton link type="primary" icon="View" onClick={() => handleView(row)}>查看</ElButton>
            </>
          ),
        },
      ],
    )
    void handleSearch()

    return () => (
      <div class="p-2 md:p-4 h-full">
        <QueryForm />
        <ElRow gutter={10} class="mb-4">
          <ElCol span={1.5}>
            <ElButton
              type="primary"
              plain
              icon="Plus"
              onClick={handleAdd}
            >
              新增
            </ElButton>
          </ElCol>
        </ElRow>
        <Table rowKey={row => row.applicationId} />
      </div>
    )
  },
})
